import { Box, Divider, Link, Text, VerticalStack } from "@shopify/polaris"
import ReportSummaryInfoCard from "./ReportSummaryInfoCard"
import Issue from "./Issue"

function Category({ index, categoryName, categoryIssues, categoryMap, categoryVsApisCountMap }) {

    const categoryDisplayName = categoryMap?.[categoryName]?.displayName || ""

    const categorySummaryItems = [
        {
            title: "Total issues",
            data: categoryIssues.length,
        }, 
        {
            title: "APIs affected",
            data: categoryVsApisCountMap[categoryName]
        }
    ]

    return (
        <Box id={categoryName} paddingBlockStart={6} paddingBlockEnd={8} paddingInlineStart={5} paddingInlineEnd={5}>
            <VerticalStack gap="4">
                <Text variant='headingMd'>
                    2.{index + 1} {categoryDisplayName}
                </Text>

                <ReportSummaryInfoCard summaryItems={categorySummaryItems} />

                <Box>
                    <VerticalStack gap="2">
                        <Text variant='headingSm'>
                            Issues
                        </Text>
                        <VerticalStack gap="2">
                            {categoryIssues.length > 0 && categoryIssues.map((issueDetails, index) => {
                                const name = issueDetails?.name
                                const testName = issueDetails?.testName
                                return (
                                    <Link key={index} url={`#${name}`} removeUnderline>
                                        <Text variant='bodySm' color='subdued'>
                                            {index + 1}. {testName}
                                        </Text>
                                    </Link>
                                )
                            })}
                        </VerticalStack>
                    </VerticalStack>
                </Box>
                
                <Divider/> 
               
                <Box>
                    {categoryIssues.map((issueDetails, index) => {
                        return (
                            <Issue key={index} issueDetails={issueDetails} index={index} isLast={index === categoryIssues.length - 1}/>
                        )
                    })}
                </Box>

            </VerticalStack>
        </Box>
    )
}

export default Category